<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: false, resize: false }"
      :close-on-click-modal="false"
      :visible="true"
      @close="closeMd"
      title="报停下线"
      :width="'400px'">
      <el-form
        :model="fm.ps"
        :ref="fm.fname"
        :label-width="'100px'"
        class="demo-form-inline"
        @keyup.enter.native="onSubmit">
          <el-form-item label="停运类型" prop="type">
            <el-radio v-model="fm.ps.type" label="DESTORY">报停</el-radio>
            <el-radio v-model="fm.ps.type" label="DOWN">下线</el-radio>
          </el-form-item>

          <template v-if="fm.ps.type == 'DESTORY'">
            <el-form-item
              label="报停时间"
              prop="destoryTime"
              :rules="[
                { required: true, message: '请选择报停时间', trigger: 'change' },
              ]">
              <el-date-picker
                v-model="fm.ps.destoryTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :picker-options="pickerOptions"
                placeholder="报停时间"
                style="width: 100%;">
              </el-date-picker>
            </el-form-item>

            <el-form-item 
              label="停靠停车场" 
              prop="applyPoint.name">
              <MapPointInp
                :name="'applyPoint'"
                :placeholder="'请选择停车场'"
                :defPoint="fm.ps.applyPoint"
                @handleSel="setPoint"
                style="width: 100%;"
              />
            </el-form-item>
          </template>

          <el-form-item
            v-if="fm.ps.type == 'DOWN'"
            label="下线时间"
            prop="downTime"
            :rules="[
              { required: true, message: '请选择下线时间', trigger: 'change' },
            ]">
            <el-date-picker
              v-model="fm.ps.downTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              :picker-options="pickerOptions"
              placeholder="下线时间"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="备注说明" prop="note">
            <el-input 
              type="textarea"
              placeholder="请输入备注说明"
              maxlength="500"
              show-word-limit
              v-model="fm.ps.note"
            />
          </el-form-item>

          <el-form-item prop="find">
            <el-button
              @click="onSubmit"
              :loading="fm.sb.load"
              type="primary">
              {{ fm.sb.text }}
            </el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import MapPointInp from '@/components/MapPointInp';

import * as logisticsSer from "@/api/services/logistics.service";

export default {
  name: "AddStopOffline",
  directives: { elDragDialog },
  props: {myData: Object},
  components: { MapPointInp },
  data() {
    let that = this;
    return {
      // 配置-报停日期
      pickerOptions: {
        disabledDate(time) {
          if(that.myData.obj.startTime){
            const dd = that.U.str2date(that.myData.obj.startTime);
            dd.setDate(dd.getDate());
            return time < dd;
          }else{
            // const dd = new Date();
            // dd.setDate(dd.getDate() - 1);
            // return time < dd;
            return false;
          }
        },
      },

      fm: {
        fname: "addStopOffLineFm",
        sb: { load: false, text: '立即预约' },
        ps: {
          // 停运类型 DESTORY-报停 DOWN-下线
          type: "DESTORY", 
          // 预约报停时间 
          destoryTime: "",
          // 停靠地点
          applyPoint: {
            address: '',
            name: '',
            lnglat: '',
          }, 
          // 预约下线时间 
          downTime: "",
          // 备注
          note: "",  
        },
      },

      // 父组件传入对象
      obj: this.myData.obj,

    };
  },
  created() {
    console.log('选择的车辆', this.myData);

    this.getDestoryDownDetail();
  },
  methods: {
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    getDestoryDownDetail(){
      const that = this, U = that.U, ps = that.fm.ps, { id } = that.obj;
      
      let p = {
        vehicleId: id, 
        applyType: that.obj.downTime ? 'DOWN' : (that.obj.destoryTime ? 'DESTORY' : '')
      };
      // 没有数据则不查询
      if(!p.applyType) return;

      logisticsSer.getDestoryDownDetail(p).then(res => {
        if(res.code == 1){
          let o = res.data;
          if(o){
            // 停运类型 DESTORY-报停 DOWN-下线
            ps.type = o.applyType;
            if(p.applyType == 'DOWN'){
              // 预约下线时间
              ps.downTime = U.datefmt(o.applyStime);
            }else if(p.applyType == 'DESTORY'){
              // 预约报停时间
              ps.destoryTime = U.datefmt(o.applyStime);
            }
            // 停靠地点
            ps.applyPoint = {
              address: o.applyAddress || '',
              name: o.applyAddress || '',
              lnglat: o.applyLatLon || '',
            };
            // 备注
            ps.note = o.note;
          }
        }
      });
    },

    // 选择地点后的回调函数
    setPoint(e){
      const that = this, ps = that.fm.ps;

      if(e.p){
        ps.applyPoint.address = `${e.p.area.split('-')[1]} ${e.p.name}`;
        ps.applyPoint.name = e.p.name;
        ps.applyPoint.lnglat = e.p.lnglat;
      }else{
        ps.applyPoint.address = '';
        ps.applyPoint.name = '';
        ps.applyPoint.lnglat = '';
      }
    },
    // 表单提交
    onSubmit() {
      const that = this, U = that.U, fm = that.fm, sb = fm.sb, { type, destoryTime, applyPoint, downTime, note } = U.scopy(fm.ps);

      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {

          let sendReq = null, ps = {};
          if (type == 'DESTORY') {// 报停
            ps = {
              // 车辆id
              vehicleId: that.obj.id,
              // 报停时间 eg：2020-04-26 12:00
              applyStime: destoryTime,
              // 预约停靠地点地址
              applyAddress: applyPoint.address,
              // 预约停靠地点坐标
              applyLatLon: applyPoint.lnglat,
              // 备注
              note,
            };
            // 报停请求
            sendReq = logisticsSer.applyDestory;
          } else {// 下线
            ps = {
              // 车辆id
              vehicleId: that.obj.id,
              // 下线时间 eg：2020-04-26 12:00
              applyStime: downTime,
              // 备注
              note,
            };
            // 下线请求
            sendReq = logisticsSer.applyDown;
          }

          sb.load = true;
          sendReq(ps).then((res) => {
            sb.load = false;

            if (res.code != 1) {
              U.qerror(res.msg);
            } else {
              U.qsuccess(res.msg);

              that.closeMd();
              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            }
          });

          setTimeout(() => { sb.load = false; }, 10000);
        }
      });

    },

  },
};
</script>